<!DOCTYPE html>
<!--<html xmlns="http://www.w3.org/1999/xhtml">-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>论坛</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 样式-->
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/bootstrap-responsive.css">
    <link rel="stylesheet" href="/static/css/prettyPhoto.css"/>
    <link rel="stylesheet" href="/static/css/flexslider.css"/>
    <link rel="stylesheet" href="/static/css/custom-styles.css">

    <!--[if lt IE 9]>
    <link rel="stylesheet" href="css/style-ie.css"/>
    <![endif]-->

    <!-- Favicons图标 -->
    <link rel="shortcut icon" href="/static/img/favicon.ico">
    <link rel="apple-touch-icon" href="/static/img/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/static/img/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/static/img/apple-touch-icon-114x114.png">

    <!-- js -->
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <script src="/static/js/jquery.prettyPhoto.js"></script>
    <script src="/static/js/jquery.flexslider.js"></script>
    <script src="/static/js/jquery.custom.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#btn-blog-next").click(function () {
                $('#blogCarousel').carousel('next')
            });
            $("#btn-blog-prev").click(function () {
                $('#blogCarousel').carousel('prev')
            });

            $("#btn-client-next").click(function () {
                $('#clientCarousel').carousel('next')
            });
            $("#btn-client-prev").click(function () {
                $('#clientCarousel').carousel('prev')
            });

        });

        $(window).load(function () {

            $('.flexslider').flexslider({
                animation: "slide",
                slideshow: true,
                start: function (slider) {
                    $('body').removeClass('loading');
                }
            });
        });

    </script>


    <style>
        .top10 {
            font-size: 15px;
            padding: 5px;
            color: black;
            display: block;
            margin-left: 10px;
        }
    </style>
</head>

<body class="home">
<!-- 最上方两个条子 -->
<div class="color-bar-1"></div>
<div class="color-bar-2 color-bg"></div>

<!-- 中间部分 -->
<div class="container">

    <!-- logo，搜索框，导航栏 -->
    <div class="row header">

        <!-- 左上角图片和logo -->
        <div class="span5 logo" style="width: 250px">
            <h5 style="font-size: 28px">一 个 论 坛</h5>
        </div>

        <!-- 导航栏 -->
        <div class="span7 navigation">
            <div class="navbar hidden-phone" style="height: 40px;">

                <ul class="nav">
                    <li class="active"><a href="/home">主页</a></li>
                    <li><a href="/publish">发帖</a>&nbsp;</li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">看帖 <b
                                class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/all-0-0-0">全部帖子</a></li>
                            {% for kind in kinds %}
                                <li><a href="/all-{{ kind.id }}-0-0">{{ kind.k_name }}</a></li>
                            {% endfor %}
                        </ul>
                    </li>

                    {% if uid %}
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown">{{ uid }}，欢迎你<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                            <li><a href="/edit-pwd">修改密码</a></li>
                            </ul>
                        </li>

                        <li><a href="/login">退出</a></li>
                    {% else %}
                        <li><a href="/login">登录</a></li>
                    {% endif %}


                </ul>

            </div>

            <!-- 移动端导航 -->
            <form action="#" id="mobile-nav" class="visible-phone">
                <div class="mobile-nav-select">
                    <select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
                        <option value="">导航栏</option>
                        <option value="/home">主页</option>
                        <option value="/publish">发帖</option>
                        <option value="/all-0-0-0">看帖</option>
                        <option value="/all-0-0-0">- 全部帖子</option>
                        {% for kind in kinds %}
                            <option value="/all-{{ kind.id }}-0-0">- {{ kind.k_name }}</option>
                        {% endfor %}

                        {% if uid %}
                        <option value="/login">退出</option>
                        {% else %}
                        <option value="/login">登录</option>
                        {% endif %}
                    </select>
                </div>
            </form>

        </div>
    </div>
    <!-- 3个结束 -->

    <!-- top 10公告, 介绍 -->
    <div class="row headline">

        <!-- top 10公告 -->
        <div class="span8">
            <h3 style="margin-top: -40px;"> &nbsp;&nbsp;TOP 10 公告<br/></h3>
            {% for a in a_list %}
                <a href="/single-an-{{ a.a_id }}" class="top10">{{ a.a_title }}</a>
            {% endfor %}
            {#            <a class="top10">第一名：重磅！Google推出了Python编辑器，惊呆了小伙伴......</a>#}
        </div>

        <!-- 指导 -->
        <div class="span4">
            <h3>欢迎来到一个论坛 <br/>
                这是指南</h3>
            <p class="lead">tip：左边是top10公告，下面是按时间排序的帖子。</p>
            <p>左边是top10公告，下面是按时间排序的帖子。请继续看。</p>
        </div>
    </div>
    <!-- top 10结束 -->

    <!-- 显示帖子 -->
    <div class="row gallery-row"><!-- 帖子列表开始 -->

        <div class="span12">
            <h5 class="title-bg">帖子推荐
                <a style="float: right;" href="/all-0-0-0" class="btn btn-mini btn-inverse hidden-phone" type="button">查看全部</a>
            </h5>

            <!-- 网格，全部帖子 -->

            <div class="row clearfix no-margin">
                <ul class="gallery-post-grid holder">

                    <!-- 1 -->
                    {% for t in r_list %}
                        <li class="span3 gallery-item" data-id="id-1" data-type="illustration">
                            <a href="/single/{{ t.t_id }}"><img src="{{ t.t_photo }}" alt="Gallery"></a>
                            <span class="project-details"><a
                                    href="single.html">{{ t.t_title }}</a>{{ t.t_introduce }}</span>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

    </div>
    <!-- 帖子显示结束 -->

</div>
<!-- 中间部分结束 -->

<!-- 结尾部分 -->
<div class="footer-container">
    <div class="container">
        <div style="margin-top: 30px" class="row">
            <div class="span12 footer-col footer-sub">
                <div class="row no-margin">
                    <div class="span6"><span class="left">一个论坛</span>
                    </div>
                    <div class="span6">
                            <span class="right">
                            <a href="#">主页</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">选项1</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a
                                    href="#">页面</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a
                                    href="#">联系我们</a>
                            </span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- 尾部结束 -->

<!-- 回到顶端 -->
<div id="toTop" class="hidden-phone hidden-tablet">回到顶端</div>

</body>
</html>
